<template> 
	<el-form ref="form" :model="form" label-position="top" class="form-container"  :rules="rules">
        <el-form-item label="内容标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入岗位名称" />
        </el-form-item>
        <el-form-item label="所属栏目" prop="categoryId">
          <el-select v-model="form.categoryId" placeholder="请选择" >
            <el-option
              v-for="dict in categoryList"
              :key="dict.categoryId"
              :label="dict.name"
              :value="dict.categoryId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="内容详情" prop="content">
          <tinymce :width="650" :height="300" v-model="form.content"></tinymce>
        </el-form-item>
         <el-form-item label="主题图片" width='100%' prop="image">
          <single-upload v-model="form.image"
                           style="width: 300px;display: inline-block;margin-left: 10px"></single-upload>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="form.author" placeholder="请输入作者" />
        </el-form-item>
        <el-form-item label="关键字" prop="keywords">
          <el-input v-model="form.keywords" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item label="简述" prop="description">
          <el-input v-model="form.description" type="textarea" placeholder="请输入简述" />
        </el-form-item>
        <el-form-item label="是否允许评论" prop="allowcomments">
              <el-radio-group v-model="form.allowcomments">
                <el-radio :label="0">不是</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
        </el-form-item>
        <el-form-item label="预读数量" prop="readnumber">
          <el-input-number v-model="form.readnumber"  :min="0" />
        </el-form-item>
        
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">返 回</el-button>
      </div>
   </el-form>
</template>
<script>
  import Tinymce from '@/components/Tinymce'
  import SingleUpload from '@/components/Upload/singleUpload'
  import { listArticle, getArticle, delArticle, addArticle, updateArticle,listCategory } from "@/api/cms/article"

  const defualtFormData={
    articleId:undefined,
    categoryId:null,
    title:'',
    author:'',
    image:'',
    keywords:'',
    description:'',
    allowcomments:0,
    readnumber:0,
    content:''
  }

  export default {
    name: 'add',
    components: {
        SingleUpload,Tinymce
    },
    data() {
      return {
        form: Object.assign({}, defualtFormData),
        active: 0,
        categoryList:[],
        rules: {
          title: [
            { required: true, message: "内容标题不能为空", trigger: "blur" }
          ],
          categoryId: [
            { required: true, message: "内容栏目不能为空", trigger: "blur" }
          ],
          content: [
            { required: true, message: "内容不能为空", trigger: "blur" }
          ]
        }
      }
    },
    created() {
      this.getCategory();
      var id=this.$route.query.id;
      if(id != undefined)
      {
        getArticle(id).then(response=>{
            this.form=response.data;
          });
      }
    },
    methods:{
      cancel() {
        this.$router.push({path:'/cms/article'});
      },
      getCategory() {
        listCategory().then(response => {
          this.categoryList = response.data;
        })
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.articleId != undefined) {
              updateArticle(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                } else {
                  this.msgError(response.msg);
                }
              });
            } else {
              addArticle(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                } else {
                  this.msgError(response.msg);
                }
              });
            }
          }
      });
      },
      handleAvatarSuccess:function()
      {

      },
      beforeAvatarUpload:function()
      {},
    }
  }
</script>
<style>

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
</style>
